<template>
  <div class="login-container">
    <div class="login-form">
      <dv-border-box-11 class="border9" title="酉阳融媒体中心">
        <!-- <h2 class="form-title">数字广电</h2>  -->
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="0px"
          title="数字广电"
          label-position="left"
          class="demo-ruleForm"
        >
          <el-form-item prop="phone">
            <el-input type="text" v-model="ruleForm.phone" autocomplete="off">
              <template slot="prepend"><i class="el-icon-user"></i></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              :type="isPasswordVisible ? 'text' : 'password'"
              v-model="ruleForm.password"
              autocomplete="off"
            >
              <template slot="prepend"><i class="el-icon-lock"></i></template>
              <template slot="append">
                <el-button
                  @click="togglePasswordVisibility"
                  icon="el-icon-view"
                />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              v-model.number="ruleForm.code"
              placeholder="验证码，点击验证码刷新"
            >
              <template slot="append"
                ><span @click="getCode" class="code-display">{{
                  viewCode
                }}</span></template
              >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              class="submit-button"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </dv-border-box-11>
    </div>
  </div>
</template>

<script>
import { currentPOST } from "api/modules";
export default {
  data() {
    return {
      viewCode: "",
      isPasswordVisible: false, // 控制密码是否可见
      ruleForm: {
        phone: "",
        password: "",
        type: "account",
        serviceName: "yy",
      },
      rules: {
        phone: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  filters: {},
  computed: {},
  created() {},
  mounted() {
    this.getCode();
    // if (localStorage.getItem('rememberInfo')) {
    //     // 有上次登录信息 显示上次登录
    //     let rememberData = JSON.parse(localStorage.getItem('rememberInfo'))
    //     const { account, password } = rememberData
    //     this.ruleForm.account = account
    //     this.ruleForm.password = password
    // }
  },
  beforeDestroy() {},
  methods: {
    submitForm(formName) {
      if (!this.ruleForm.phone || !this.ruleForm.password) {
        this.$message.error("账号或密码不能为空！");
        return;
      }
      // if (!this.ruleForm.code || this.ruleForm.code!== this.viewCode) {
      //     this.$message.error('验证码不正确！')
      //     return
      // }
      // this.$refs[formName].validate((valid) => {
      //     if (valid) {

      //         alert('submit!');
      //     } else {
      //         return false;
      //     }
      // });
      this.login(formName);
      this.$router.push("/index");
    },
    togglePasswordVisibility() {
      this.isPasswordVisible = true; // 先设置为可见
      setTimeout(() => {
        this.isPasswordVisible = false; // 500 毫秒后自动恢复为不可见
      }, 1000);
    },
    getCode() {
      this.viewCode = "";
      let codeString =
        "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
      let codeArray = codeString.split("");
      let num = codeArray.length;
      let newCodeArray = [];
      for (let i = 0; i < 5; i++) {
        let index = Math.floor(Math.random() * num);
        newCodeArray.push(codeArray[index]);
      }
      this.viewCode = newCodeArray.join("");
    },
    login(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return;

        currentPOST("login", this.ruleForm)
          .then((res) => {
            if (res.code === 0) {
              this.$message.success("用户登录成功");
              window.sessionStorage.setItem("token", res.data.satoken);
              this.$router.push("/index");
            } else {
              this.$message.error("用户登录失败");
            }
          })
          .catch((error) => {
            console.error("饼图请求失败:", error);
          });
        //跳转到后台管理系统首页
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-ruleForm .el-form-item {
  margin-bottom: 24px;
  /* 间隔 */
  line-height: 1.5;
  /* 设置行高 */
}

.form-title {
  text-align: center;
  /* 居中 */
  margin-bottom: 20px;
  /* 下边距 */
  font-size: 24px;
  /* 字体大小 */
  font-weight: bold;
  /* 字体加粗 */
  color: white;
}

.login-container {
  // background-color: wheat;
  background-image: url("../assets/img/pageBg.png");
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form {
  display: flex;
  background-color: transparent;
  text-align: center;
  align-items: center;
  border: none;
  box-shadow: none;
  width: 450px;
  height: 270px;
  margin-top: 20px;
}

.code-display {
  display: inline-block; // 确保其是行内块元素
  min-width: 74px; // 根据实际情况设置一个适合的最小宽度
  text-align: center; // 文字居中
  cursor: pointer; // 设置点击手势
}

.border9 {
  display: flex; // Use flexbox
  justify-content: center; // Center horizontally
  align-items: center; // Center vertically
  padding: 40px; // Add padding
  padding-top: 100px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // Optional shadow for the border9
  border-radius: 3px; // Optional rounded corners
}

.submit-button {
  width: 100%;
  background-color: #182166;
}
</style>
